import React, { useState } from 'react'
import Navbar from '../../components/Navbar'
import { Form, Input, Button, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

import { regtel } from "../../apis/reg"
import '../../style/reg/tel.scss'

export default function Reg() {
  const navigate = useNavigate()

  const [bool, setbool] = useState(true)

  const [regexp] = useState<RegExp>(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/)

  const onFinish = (values: any) => {
    // console.log(values);
    navigate('/code',{state:{tel:values.tel}})

  }

  let fun = async (e: any) => {
    if (regexp.test(e.target.value)) {
      let res: any = await regtel(e.target.value)
      switch (res.code) {
        case "200":
          setbool(false)
          Toast.show({
            content: res.message,
            position: 'top',
          })

          break;
        case "10005":
          Toast.show({
            content: res.message,
            position: 'top',
          })

          break;

        default:
          break;
      }
    } else {
      setbool(true)
    }

  }

  let cler = () => {
    setbool(true)
  }
  return (
    <div>
      <Navbar title="注册"/>

      <Form onFinish={onFinish}
        style={{ marginTop: '10%', padding: '6px' }}
        layout='horizontal'
        footer={
          <Button block type='submit' color='danger' size='large' shape='rounded'
            disabled={bool}
          >
            下一步
          </Button>
        }>

        <Form.Item name='tel' rules={[{ pattern: regexp, message: "输入正确手机号" }]}  >

          <Input
            placeholder='请输入手机号'
            clearable
            autoComplete='false'
            onKeyUp={(e) => { fun(e) }}
            onClear={() => { cler() }}
          />
        </Form.Item>
      </Form>
    </div>
  )
}